<template>
  <div class="loginBox">
    <h3>登陆账号</h3>
    <p style="text-align:left">虾米-严选商城欢迎您</p>
    <div class="account" :class="{'color':userShow}">
      <input type="text" placeholder="手机账号" v-model="modile" @blur="user" />
      <span v-show="userShow">必填</span>
      <van-icon name="phone-o" size="18" color="#666" />
    </div>
    <div class="pass" :class="{'color':passShow}">
      <input type="password" placeholder="密码" v-show="!passShow2" v-model="password" @blur="pass" />
      <input type="text" placeholder="密码"  v-model="password" class="passCont" v-show="passShow2" /> 
      <span v-show="passShow">必填</span>
      <van-icon name="closed-eye" size="18" v-show="!passShow2" color="#666" @click="passChange" />
      <van-icon name="eye-o" size="18" v-show="passShow2" color="#666"  @click="passChange" />
    </div>
    <button @click="login">登录</button>
    <p>忘记密码</p>
    <p style="color:#549ff9;" @click="goto" >还没有注册？立即注册</p>
  </div>
</template>

<script>
import UserUtils from '../../utils/userUtils'
export default {
  data() {
    return {
      userShow: false,
      passShow:false,
      passShow2:false,
      modile:null,
      password:''
    };
  },
  methods: {
      goto(){
          this.$router.push({
              path:'/register'
          })
      },
      //手机验证
      user(){          
          if(UserUtils.mobileCheckout(this.modile)!=true||this.modile==null){          
              this.userShow=true
          }else{
              this.userShow=false
          }
      },
      //密码验证
      pass(){
           if(UserUtils.passwordCheckout(this.password)!=true||this.password==null){
              this.passShow=true
          }else{
              this.passShow=false
          }
      },
      //密码显示
      passChange(){
          this.passShow2=!this.passShow2
      },
      login(){
         if(this.userShow==false&&this.passShow==false){
             console.log(this.modile);
             this.$store.dispatch('getToken',{
                 mobile:this.modile,
                 pwd:this.password
             })
           
             //账户密码储存
             UserUtils.getUser(this.modile,this.password)
             //跳转我的页面
              this.$toast('登陆成功'),
             setTimeout(()=>{
                 this.$router.push({path:'/personal'})
                //token储存
                  UserUtils.setToken(this.$store.state.GetToken.token)
             },2000)
         }else{
            this.$toast('请输入正确的账户密码');
         }
      }
  },
};
</script>

<style lang="scss" scoped>
* {
  margin: 0;
  padding: 0;
}
.loginBox {
  width: 5.08rem;
  margin: 0.38rem auto;
  padding: 0 0.32rem;
  border: 0.02rem solid #f5f5f5;
  height: 11.34rem;
  h3 {
    font-size: 0.44rem;
    margin-top: 0.31rem;
    font-weight: 400;
    color: #666;
  }
  p {
    font-size: 0.28rem;
    color: #999;
    margin-top: 0.26rem;
    text-align: center;
  }
  div {
    width: 5.4rem;
    height: 1rem;
    margin: 0 auto;
    border: 0.01rem solid #f5f5f5;
    background: #f5f5f5;
    border-radius: 0.16rem;
    display: flex;
    align-items: center;
    input {
      border: none;
      background: #f5f5f5;
      margin: 0 0.15rem;
      font-size: 0.37rem;
    }
    span {
      font-size: 0.28rem;
      color: red;
      margin: 0 0.05rem;
    }
  }
  .account {
    margin-top: 0.31rem;
  }
  .pass {
    margin-top: 0.17rem;
        // .passCont {
        //   width: 1.7677rem;
        //   height: 0.16rem;
        //   background: #f5f5f5;
        // }
  }
  button {
    display: block;
    width: 4rem;
    height: 1rem;
    font-size: 0.5rem;
    margin: 0.215rem auto;
    background: linear-gradient(135deg, #e570e7 0%, #79f1fc 100%);
    box-sizing: border-box;
    box-shadow: 0 5px 3px rgba(0, 0, 0, 0.3);
    cursor: pointer;
    border-radius: 0.05rem;
    border: none;
  }
}
.color{
  border: 0.01rem solid rgb(225, 44, 30) !important;
  background: rgb(255, 233, 228) !important;
  input{
      background: rgb(255, 233, 228) !important;
  }
}
</style>